<template>
	<div class="content">
		<el-card class="box-card">
			<div class="tech-topView row" @click="goBack">
				<i class="el-icon-back" />
				<div class="el-title-text">编辑加钟服务</div>
			</div>
			<div class="lb-goods-edit-classify mb-lg row">
				<div class="title">基础信息</div>
			</div>
			<el-form ref="form" :model="form" :rules="rules" label-width="150px">
				<el-form-item label="项目名称" prop="itemName">
					<el-input v-model="form.itemName" placeholder="请输入项目名称" class="elInput" />
				</el-form-item>
				<el-form-item label="项目主图" prop="itemMainPicture">
					<image-upload v-model="form.itemMainPicture" :limit="1" />
				</el-form-item>
				<el-form-item label="项目轮播图" prop="itemBanner">
					<image-upload v-model="form.itemBanner" />
				</el-form-item>
				<el-form-item label="项目时长" prop="itemTime">
					<el-input v-model="form.itemTime" placeholder="请输入项目时长" class="elInput">
						<template slot="append">分钟</template>
					</el-input>
				</el-form-item>
				<el-form-item label="真实购买量" prop="realSalesCount">
					<el-input v-model="form.realSalesCount" placeholder="请输入购买量" class="elInput" />
				</el-form-item>
				<el-form-item label="虚拟购买量" prop="virtualSalesCount">
					<el-input v-model="form.virtualSalesCount" placeholder="请输入购买量" class="elInput" />
				</el-form-item>
				<el-form-item label="项目价格" prop="itemPrice">
					<el-input v-model="form.itemPrice" placeholder="请输入项目价格" class="elInput" />
				</el-form-item>
				<el-form-item label="项目会员价" prop="itemMemberPrice">
					<el-input v-model="form.itemMemberPrice" placeholder="请输入项目会员价" class="elInput" />
				</el-form-item>
				<el-form-item label="上架状态" prop="isShelves">
					<el-radio-group v-model="form.isShelves">
						<el-radio v-for="dict in dict.type.is_shelves" :key="dict.value"
							:label="parseInt(dict.value)">{{dict.label}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<div class="lb-goods-edit-classify mb-lg row">
					<div class="title">其他信息</div>
				</div>
				<el-form-item label="项目简介" prop="itemIntroduction">
					<el-input v-model="form.itemIntroduction" placeholder="请输入项目简介" class="elInput" />
				</el-form-item>
				<el-form-item label="项目特色">
					<editor v-model="form.itemFeatures" :min-height="192" class="elEdit" />
				</el-form-item>
				<el-form-item label="项目描述">
					<editor v-model="form.itemDescription" :min-height="192" class="elEdit" />
				</el-form-item>
				<el-form-item label="关联技师">
					<el-button type="primary" icon="el-icon-plus" @click="asociaBut">关联技师</el-button>
				</el-form-item>

				<el-table v-loading="loading" :data="selectItem" class="elTable">
					<el-table-column label="ID" align="center" prop="tid" />
					<el-table-column label="技师头像" align="center" prop="mark">
						<template slot-scope="scope">
							<image-preview :src="scope.row.technicianAvatar" :width="50" :height="50" />
						</template>
					</el-table-column>
					<el-table-column label="技师姓名" align="center" prop="technicianName" />
					<el-table-column label="手机号" align="center" prop="technicianTel" />

					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
						<template slot-scope="scope">
							<el-button type="danger" plain size="small "
								@click="handleDelete(scope.row)">取消关联</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="techTotal>0" :total="techTotal" :page.sync="techParams.pageNum"
					:limit.sync="techParams.pageSize" @pagination="seletOldList" />


				<el-form-item label="项目规格" class="mt-mg">
					<el-button type="primary" icon="el-icon-plus" @click="spaceItemBut">项目规格</el-button>
				</el-form-item>
				<el-table v-loading="loading" :data="ItemSpecsList" class="elTable">
					<el-table-column label="ID" align="center" prop="id" />
					<el-table-column label="规格名称" align="center" prop="itemSpecsName" />
					<el-table-column label="规格时长" align="center" prop="itemSpecsTime" />
					<el-table-column label="规格原价" align="center" prop="itemSpecsPrice" />
					<el-table-column label="规格会员价" align="center" prop="itemSpecsMemberPrice" />
					<el-table-column label="创建时间" align="center" prop="createTime" width="180">
						<template slot-scope="scope">
							<span>{{ parseTime(scope.row.createTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="spaceUpdate(scope.row)"
								v-hasPermi="['ItemSpecs:ItemSpecs:edit']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="spaceDelete(scope.row)"
								v-hasPermi="['ItemSpecs:ItemSpecs:remove']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="specsTotal>0" :total="specsTotal" :page.sync="specsParams.pageNum"
					:limit.sync="specsParams.pageSize" @pagination="specsList" />
			</el-form>



			<div class="dialog-footer">
				<el-button type="primary" @click="submitForm">提 交</el-button>
				<el-button @click="goBack">取 消</el-button>
			</div>

		</el-card>


		<!-- tamchuamgffffffffffffffffffffffffffffffffffffffffffffffffffftttttttttt -->

		<el-dialog :title="title" :visible.sync="asOpen" width="1000px" append-to-body center>
			<el-form :model="queryParam" ref="queryForm" size="small" :inline="true" v-show="showSearch"
				label-width="68px">
				<el-form-item label="输入查询" prop="keyWord">
					<el-input v-model="queryParam.keyWord" placeholder="请输入技师姓名/手机号" clearable
						@keyup.enter.native="handleQuery" class="elInput" />
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
							class="elButt">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form-item>
			</el-form>

			<el-table v-loading="loading" :data="seletRoutineList" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="ID" align="center" prop="tid" />
				<el-table-column label="头像" align="center" prop="technicianAvatar">
					<template slot-scope="scope">
						<image-preview :src="scope.row.technicianAvatar" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="技师姓名" align="center" prop="technicianName" />
				<el-table-column label="手机号" align="center" prop="technicianTel" />
			</el-table>
			<pagination v-show="assTotal>0" :total="assTotal" :page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize" @pagination="seletList" />
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="assmitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 添加或修改项目规格对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="specsForm" :model="specsForm" :rules="rules" label-width="100px">
				<el-form-item label="规格名称" prop="itemSpecsName">
					<el-input v-model="specsForm.itemSpecsName" placeholder="请输入规格名称" />
				</el-form-item>
				<el-form-item label="规格时长" prop="itemSpecsTime">
					<el-input v-model="specsForm.itemSpecsTime" placeholder="请输入规格时长" />
				</el-form-item>
				<el-form-item label="规格原价" prop="itemSpecsPrice">
					<el-input v-model="specsForm.itemSpecsPrice" placeholder="请输入规格原价" />
				</el-form-item>
				<el-form-item label="规格会员价" prop="itemSpecsMemberPrice">
					<el-input v-model="specsForm.itemSpecsMemberPrice" placeholder="请输入规格会员价" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="splaceForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		getClockItem,
		delClockItem,
		addClockItem,
		updateClockItem
	} from "@/api/clockItem/clockItem";
	import {
		seletRoutineItem,
		seletAddItem,
		upDataItem,
		seletItem
	} from "@/api/clockItem/clockItem";
	import {
		delItemSpecs
	} from "@/api/ItemSpecs/ItemSpecs";
	import { listClockItemSpecs, getClockItemSpecs, delClockItemSpecs, addClockItemSpecs, updateClockItemSpecs } from "@/api/clockItemSpecs/clockItemSpecs";
	export default {
		dicts: ['is_can_upgrade', 'is_shelves'],
		data() {
			return {
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 弹出层标题
				title: "",
				// 关联技师弹窗
				asOpen: false,
				open: false,
				// 总条数
				assTotal: 0,
				specsTotal: 0,
				techTotal: 0,
				// 技师添加列表
				seletRoutineList: [],
				// 项目规格表格数据
				ItemSpecsList: [],
				// 关联技师列表
				selectItem: [],
				// 遮罩层
				loading: true,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				specsParams: {
					pageNum: 1,
					pageSize: 10,
				},
				techParams: {
					pageNum: 1,
					pageSize: 10,
				},
				queryParam: {
					keyWord: null,
					itemId: null
				},
				// 表单参数
				form: {},
				specsForm: {},
				// 表单校验
				rules: {}
			}
		},
		created() {
			if (this.$route.query.id) this.handleUpdate();
		},
		methods: {
			// 表单重置
			reset() {
				this.form = {
					id: null,
					itemName: null,
					itemMainPicture: null,
					itemBanner: null,
					itemTime: null,
					itemIntroduction: null,
					itemFeatures: null,
					itemDescription: null,
					realSalesCount: null,
					virtualSalesCount: null,
					tid: [],
					itemPrice: null,
					itemMemberPrice: null,
					isCanUpgrade: null,
					isShelves: null,
					isDelete: null,
					createTime: null,
					updateTime: null
				};
				this.resetForm("form");
			},
			// 表单重置
			specsReset() {
				this.specsForm = {
					id: null,
					itemId: null,
					itemSpecsName: null,
					itemSpecsTime: null,
					itemSpecsPrice: null,
					itemSpecsMemberPrice: null,
					isDelete: null,
					createTime: null,
					updateTime: null
				};
				this.resetForm("specsForm");
			},
			// 查询关联技师列表
			seletOldList() {
				this.loading = true;
				this.techParams.itemId = this.$route.query.id
				seletItem(this.techParams).then(response => {
					this.selectItem = response.data.list;
					this.techTotal = response.data.total;
					this.loading = false;
				});
			},
			/** 查询添加技师列表 */
			seletList() {
				this.loading = true;
				this.queryParam.itemId = this.$route.query.id
				let data = {
					...this.queryParams,
					...this.queryParam
				}
				seletRoutineItem(data).then(response => {
					this.seletRoutineList = response.data.list;
					this.assTotal = response.data.total;
					this.loading = false;
				});
			},
			/** 查询项目规格列表 */
			specsList() {
				this.loading = true;
				this.specsParams.clockItemId = this.$route.query.id
				listClockItemSpecs(this.specsParams).then(response => {
					this.ItemSpecsList = response.rows;
					this.specsTotal = response.total;
					this.loading = false;
				});
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = this.$route.query.id
				getClockItem(id).then(response => {
					this.form = response.data;
					this.form.tid = this.form.tid.split(",");
					this.specsList() //项目规格列表
					this.seletOldList() //技师列表
				});
			},
			/** 修改规格按钮操作 */
			spaceUpdate(row) {
				this.specsReset()
				const id = row.id || this.ids
				getClockItemSpecs(id).then(response => {
					this.specsForm = response.data;
					this.open = true;
					this.title = "修改项目规格";
				});
			},
			spaceDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除项目规格编号为"' + ids + '"的数据项？').then(function() {
					return delClockItemSpecs(ids);
				}).then(() => {
					this.$modal.msgSuccess("删除成功");
					this.specsList();
				}).catch(() => {});
			},
			handleDelete(row) {
				let data = {}
				data.tid = row.tid
				data.itemId = this.$route.query.id
				upDataItem(data).then(response => {
					this.$modal.msgSuccess("取消成功");
					// this.seletOldList() //技师列表
					this.handleUpdate()
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.seletList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			/** 关联技师按钮操作 */
			asociaBut() {
				this.asOpen = true
				this.title = '添加技师'
				this.seletList()
			},
			/** 关联技师按钮操作 */
			spaceItemBut() {
				this.specsReset()
				this.open = true
				this.title = '添加项目规格'
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.tid)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			assmitForm() {
				let data = {}
				data.tids = this.ids
				data.itemId = this.$route.query.id
				// data={...this.queryParams , ...data}
				if(!data.tids.length){
					this.$modal.msgError("请选择技师");
					return false
				}
				seletAddItem(data).then(response => {
					this.$modal.msgSuccess("添加成功");
					this.asOpen = false;
					// this.seletOldList();
					this.handleUpdate()
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.form.tid = this.form.tid.join(",");
						if (this.form.id != null) {
							updateClockItem(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.handleUpdate();
							});
						} else {
							addClockItem(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.handleUpdate();
							});
						}
						// this.specsReset()
					}
				});
			},
			splaceForm() {
				this.specsForm.clockItemId =  this.$route.query.id
				this.$refs["specsForm"].validate(valid => {
					if (valid) {
						if (this.specsForm.id != null) {
							updateClockItemSpecs(this.specsForm).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.specsList();
							});
						} else {
							addClockItemSpecs(this.specsForm).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.specsList();
							});
						}
					}
				});
			},
			// 取消按钮
			cancel() {
				this.asOpen = false
				this.open = false
				// this.reset();
				this.specsReset()
			},
			goBack() {
				this.$commonJs.backRou()
				this.reset();
				this.specsReset()
			}

		},
	}
</script>

<style scoped lang="less">
	.box-card {
		margin: 20px;

		.mb-lg {
			margin-bottom: 15px;
		}
	}

	.mt-mg {
		margin-top: 20px;
	}

	.elButt {
		margin-left: 20px;
	}

	.elTable {
		width: 90%;
		margin: auto;
	}

	.tech-topView {
		border-bottom: 1px solid #e1e1e1;
		padding-bottom: 10px;

		.el-title-text {
			font-size: 14px;
			color: #666;
			margin-left: 10px;
		}
	}

	.lb-goods-edit-classify {
		width: 100%;
		border-top: 1px solid #eff2f6;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		.title {
			display: inline-block;
			padding: 6px 15px;
			color: #609beb;
			background: #f5f7fa;
			margin-right: 10px;
			font-size: 14px;
		}

		.tips {
			color: #fe6c6f;
			font-size: 12px;
		}
	}
</style>